<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑门店</title>
    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <link href="../../resource/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"/>
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <style>
        #edit_form button {
            padding: 4px 12px;
        }

        .hr-line-dashed {
            margin: 15px 0;
        }

        .form-control {
            display: inline-block;
            margin-right: 5px;
        }

        .form-control.OnlyFloat,
        .form-control.OnlyNum {
            width: 100px;
        }

        .checkbox-first {
            padding-left: 0 !important;
        }

        .map-box {
            position: relative;
            height: 500px;
            width: 700px;
        }

        .map {
            height: 500px;
            width: 700px;
        }

        .map-search-input {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 200px;
            height: 34px;
            border-radius: 5px;
            padding-left: 4px;
            border: 1px solid #ffffff !important;
            background-color: #ffffff;

        }

        .red {
            color: red;
            margin-left: 2px;
        }

        .validate-red {
            border: 1px solid red !important;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="ibox float-e-margins m-b-none">
            <div class="col-sm-12">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a class="tab1" data-toggle="tab" href="#tab-1"
                               aria-expanded="true">门店基本信息</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <!--基本配置-->
                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body">
                                <form class="form-horizontal" id="shopConfig">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">门店名称 <span class="red">*</span></label>
                                        <div class="col-sm-6">
                                            <input type="text" id="title" name="title"
                                                   class="form-control input-validate"
                                                   th:value="${shop!=null?shop.title:''}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">LOGO <span class="red">*</span></label>
                                        <div class="col-sm-6">
                                            <input class="file" type="file" id="uploadfileVideo" name="img"
                                                   style="display: none;"
                                                   accept="image/*" view-element=".videoPreview"
                                                   val-element="#videoUrl"/>
                                            <input type="hidden" name="videoUrl" id="videoUrl"
                                                   th:value="${shop!=null?shop.logo:''}"/>
                                            <a title="选择图片">
                                                <img class="videoPreview" src="../../resource/img/bg.png"
                                                     th:src="${shop!=null?shop.logo:''}"
                                                     onerror="this.src='/resource/img/bg.png'"
                                                     style="margin-top: 10px; width:150px;height:150px;"
                                                />
                                            </a>
                                        </div>
                                    </div>
                                    <div class="form-group form-inline">
                                        <label class="col-sm-2 control-label">经营业务 <span class="red">*</span></label>
                                        <div class="col-sm-10">
                                            <div class="checkbox checkbox-primary checkbox-first">
                                                <input type="checkbox"
                                                       th:checked="${shop!=null?shop.palmEyeService:false}"
                                                       id="palmEyeService" name="palmEyeService"
                                                       th:value="${shop!=null?shop.palmEyeService:false}"
                                                       value="1">
                                                <label for="palmEyeService"><font>掌眼</font></label>
                                            </div>
                                            <div class="checkbox checkbox-primary">
                                                <input type="checkbox"
                                                       th:checked="${shop!=null?shop.repairService:false}"
                                                       id="repairService" name="repairService"
                                                       th:value="${shop!=null?shop.repairService:false}"
                                                       value="1">
                                                <label for="repairService"><font>修复</font></label>
                                            </div>

                                            <div class="checkbox checkbox-primary">
                                                <input type="checkbox"
                                                       th:checked="${shop!=null?shop.schoolService:false}"
                                                       id="schoolService" name="schoolService"
                                                       th:value="${shop!=null?shop.schoolService:false}"
                                                       value="1">
                                                <label for="schoolService"><font>学院</font></label>
                                            </div>

                                            <div class="checkbox checkbox-primary" th:each="tag:${tags}">
                                                <input type="checkbox" id="tag_1" th:checked="${tag.selected}"
                                                       th:id="|tag_${tag.id}|" th:value="${tag.id}"
                                                       name="chkServiceTag" value="1">
                                                <label for="tag_1" th:for="|tag_${tag.id}|"><font
                                                        th:text="${tag.title}">抛光</font></label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group form-inline">
                                        <label class="col-sm-2 control-label">经营类目 <span class="red">*</span></label>
                                        <div class="col-sm-10">
                                            <div class="checkbox checkbox-primary"
                                                 th:class="${stat.count==1?'checkbox checkbox-primary checkbox-first':'checkbox checkbox-primary'}"
                                                 th:each="scope,stat:${scopes}">
                                                <input type="checkbox" id="scope_1" th:checked="${scope.selected}"
                                                       th:id="|scope_${scope.id}|" th:value="${scope.id}"
                                                       name="chkServiceScope" value="1">
                                                <label for="scope_1" th:for="|scope_${scope.id}|"><font
                                                        th:text="${scope.title}">抛光</font></label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">营业时间 <span class="red">*</span></label>
                                        <div class="col-sm-8">
                                            <input type="text" id="businessHours"
                                                   name="businessHours" style="width: 200px;"
                                                   class="form-control input-validate"
                                                   th:value="${shop!=null?shop.businessHours:''}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">联系电话 <span class="red">*</span></label>
                                        <div class="col-sm-8">
                                            <input type="text" value="" id="contactWay"
                                                   name="contactWay" style="width: 150px;"
                                                   class="form-control input-validate"
                                                   th:value="${shop!=null?shop.contactWay:''}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">详细信息</label>
                                        <div class="col-sm-8">
                                           <textarea id="details" name="details"
                                                     class="form-control" style="width: 400px;"
                                                     th:text="${shop!=null?shop.details:''}"
                                                     placeholder="详细信息"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">城市 <span class="red">*</span></label>
                                        <div class="col-sm-8">
                                            <select id="sltProvince" class="form-control input-s-sm">
                                                <option value="0">请选择</option>
                                            </select>
                                            <select id="sltCity" class="form-control input-s-sm">
                                                <option value="0">请选择</option>
                                            </select>
                                            <select id="sltDistrict" class="form-control input-s-sm">
                                                <option value="0">请选择</option>
                                            </select>
                                        </div>

                                        <input id="hdProvinceCode"
                                               th:value="${shop!=null&&shop.shopAddress!=null ? shop.shopAddress.provinceCode:''}"
                                               type="hidden">
                                        <input id="hdCityCode"
                                               th:value="${shop!=null&&shop.shopAddress!=null ? shop.shopAddress.cityCode:''}"
                                               type="hidden">
                                        <input id="hdDistrictCode"
                                               th:value="${shop!=null&&shop.shopAddress!=null ? shop.shopAddress.districtCode:''}"
                                               type="hidden">

                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">详细地址 <span class="red">*</span></label>
                                        <div class="col-sm-8">
                                            <input type="text" value="" id="detailInfo"
                                                   name="detailInfo" style="width: 400px;"
                                                   class="form-control input-validate"
                                                   th:value="${shop!=null&&shop.shopAddress!=null?shop.shopAddress.detailInfo:''}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">经纬度</label>
                                        <div class="col-sm-8">
                                            <input type="hidden" id="lnglat" th:value="${shop!=null?shop.lnglat:''}">
                                            <div class="map-box">
                                                <div id="container" class="map"></div>
                                                <input type="text" id="map-search-input" class="map-search-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">关联商城店铺ID</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control only-num" style="width: 150px;"
                                                   id="onlineMerchantId" name="onlineMerchantId"
                                                   th:value="${shop!=null?shop.onlineMerchantId:''}"
                                                   placeholder="关联商城店铺ID">
                                        </div>
                                    </div>
                                    <div class="form-group form-inline">
                                        <label class="col-sm-2 control-label">推荐店铺</label>
                                        <div class="col-sm-10">
                                            <div class="checkbox checkbox-primary checkbox-first">
                                                <input type="checkbox" th:checked="${shop!=null?shop.recommend:false}"
                                                       id="recommend" name="recommend"
                                                       th:value="${shop!=null?shop.recommend:false}"
                                                       value="0">
                                                <label for="recommend"><font>推荐</font></label>
                                            </div>
                                        </div>
                                    </div>

                                </form>
                                <div class="form-group" style="margin-top: 10px;">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <button class="btn btn-success btn-submit" type="button"
                                                onclick="jsHelper.submit()">保存
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js(12312)}"></script>


<script src="../../resource/hotui/js/plugins/ajaxfileupload.js"
        th:src="@{/resource/hotui/js/plugins/ajaxfileupload.js}"></script>


<script type="text/javascript"
        src='https://webapi.amap.com/maps?v=2.0&key=6c54de9224ba43b89ec9c49d78900c15&plugin=AMap.ToolBar'></script>
<!-- UI组件库 1.0 -->
<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>


<script type="text/javascript" th:inline="javascript">
    const editUri = /*[[@{/shop/edit}]]*/  "";
    const uploadUri = /*[[@{/resource/upload}]]*/  "";
    const shopId =/*[[${shopId}]]*/ 0;
    const _lnglat = /*[[${shop!=null?shop.lnglat:''}]]*/ '120.156348,30.273599';
    let lng = 120.156348;
    let lat = 30.273599;
    if (typeof _lnglat != 'undefined' && _lnglat.length > 0) {
        lng = _lnglat.split(",")[0];
        lat = _lnglat.split(",")[1];
    }
</script>
<script type="text/javascript">
    let jsHelper = {
        init: function () {
            let that = this;
            let provinceCode = $("#hdProvinceCode").val();
            that.initCity(0, "#sltProvince", $("#hdProvinceCode").val());
            $("#sltProvince").on("change", function () {
                if (provinceCode !== this.value) {
                    $("#hdProvinceCode").val('');
                    $("#hdCityCode").val('');
                    $("#hdDistrictCode").val('');
                    $("#sltDistrict").val("0");
                }
                that.initCity(this.value, "#sltCity", $("#hdCityCode").val());
            });
            $("#sltCity").on("change", function () {
                that.initCity(this.value, "#sltDistrict", $("#hdDistrictCode").val());
            });
        },
        initCity(pid, domId, selectedId, callback) {
            let that = this;
            selectedId = selectedId || '';
            that.cities(pid, function (data) {
                let html = '<option value="0">请选择</option>';
                $.each(data, function (i, item) {
                    html += '<option value="' + item.id + '">' + item.name + '</option>';
                });
                $(domId).html(html);
                if (selectedId && selectedId.length > 0) {
                    $(domId).val(selectedId);
                    $(domId).change()
                }
                if (typeof callback == 'function') {
                    callback();
                }
            });
        },
        cities(pid = 0, callback) {
            hot.ajax("/order/cities", {
                pid: pid
            }, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    callback(apiResult.data);
                }
            }, function () {
            }, "get");
        },
        /**
         * 保存
         */
        submit() {
            hot.loading.show();
            let flag = true;
            $("#shopConfig .input-validate").each(function () {
                $(this).removeClass('validate-red');
                let value = $(this).val();
                if (typeof value === "undefined" || value.length === 0) {
                    $(this).addClass('validate-red');
                    $(this).focus();
                    hot.loading.close();
                    flag = false;
                    return false;
                }
            });
            if (!flag) {
                return;
            }
            let logoUrl = $("#videoUrl").val();
            if (typeof logoUrl === 'undefined' || logoUrl.length === 0) {
                hot.tip.error("请上传门店LOGO");
                return;
            }
            let chkServiceTag = [];
            $('input[name="chkServiceTag"]:checked').each(function () {
                chkServiceTag.push($(this).val());
            });
            let chkServiceScope = [];
            $('input[name="chkServiceScope"]:checked').each(function () {
                chkServiceScope.push($(this).val());
            });


            let recommend = false;
            let palmEyeService = false;
            let repairService = false;
            let schoolService = false;
            $('input[name="recommend"]:checked').each(function () {
                recommend = true;
            });
            $('input[name="palmEyeService"]:checked').each(function () {
                palmEyeService = true;
            });
            $('input[name="repairService"]:checked').each(function () {
                repairService = true;
            });
            $('input[name="schoolService"]:checked').each(function () {
                schoolService = true;
            });

            if (!palmEyeService && !repairService && !schoolService && chkServiceTag.length === 0) {
                hot.tip.error("请选择经营业务");
                return;
            }

            if (chkServiceScope.length === 0) {
                hot.tip.error("请选择经营类目");
                return;
            }

            let telNumber = $("#contactWay").val();
            let provinceCode = $("#sltProvince").val();
            let cityCode = $("#sltCity").val();
            let districtCode = $("#sltDistrict").val();
            let provinceName = $("#sltProvince").find("option:selected").text();
            let cityName = $("#sltCity").find("option:selected").text();
            let countyName = $("#sltDistrict").find("option:selected").text();
            let detailInfo = $("#detailInfo").val();
            let longitude_latitude = $("#lnglat").val();
            let onlineMerchantId = $("#onlineMerchantId").val();
            if (typeof districtCode === 'undefined' || districtCode.length === 0 || districtCode === '请选择' || parseInt(districtCode) === 0) {
                hot.tip.error("请选择所在城市");
                return;
            }
            if (typeof lnglat === 'undefined' || lnglat.length === 0) {
                hot.tip.error("请选择经纬度");

                return;
            }

            if (typeof onlineMerchantId !== 'undefined' && onlineMerchantId.length === 0 && parseInt(onlineMerchantId) <= 0) {
                hot.tip.error("关联商城店铺ID无效");
                return;
            }

            let requestData = {
                title: $("#title").val(),
                logo: logoUrl,
                palmEyeService: palmEyeService,
                repairService: repairService,
                schoolService: schoolService,
                tags: chkServiceTag.length > 0 ? chkServiceTag.join(',') : '',
                scopes: chkServiceScope.join(','),
                businessHours: $("#businessHours").val(),
                contactWay: $("#contactWay").val(),
                details: $("#details").val(),
                telNumber: telNumber,
                provinceCode: provinceCode,
                cityCode: cityCode,
                districtCode: districtCode,
                provinceName: provinceName,
                cityName: cityName,
                countyName: countyName,
                detailInfo: detailInfo,
                lnglat: longitude_latitude,
                onlineMerchantId: onlineMerchantId,
                recommend: recommend,
                id: shopId
            }
            hot.ajax(editUri, requestData, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    hot.tip.success("保存成功", function () {
                        // if (shopId <= 0) {
                        //     window.location.href = editUri + "?shopId=" + apiResult.data;
                        // }
                    }, 300);
                } else {
                    hot.tip.error(apiResult.resultMsg);
                }
            }, function () {
            }, "post", 300);

        }
    };
    $(function () {
        $("#uploadfileVideo").change(function () {
            let $view = $(this).attr('view-element');
            let $val = $(this).attr('val-element');
            hot.loading.show();
            hot.fileUpload(uploadUri, $(this).attr('id'), null, function (apiResult) {
                hot.loading.close();
                if (apiResult.resultCode === 2000) {
                    $($view).attr("src", apiResult.data.previewUrl);
                    $($val).val(apiResult.data.previewUrl);
                }
            });
        });
        //上传
        $('.videoPreview').click(function () {
            $("#uploadfileVideo").click();
        });


        $("#shopConfig .input-validate").change(function () {
            $(this).removeClass('validate-red');
            let value = $(this).val();
            if (typeof value === "undefined" || value.length === 0) {
                $(this).addClass('validate-red');
            }
        });


        jsHelper.init();
    });
</script>


<script type="text/javascript">
    let GPoiPicker;
    let map = new AMap.Map('container', {
        zoom: 16,
        scrollWheel: false,
        center: [lng, lat]
    });
    AMapUI.loadUI(['misc/PositionPicker', 'misc/PoiPicker'], function (PositionPicker, PoiPicker) {
        GPoiPicker = PoiPicker;
        let positionPicker = new PositionPicker({
            mode: 'dragMap',
            map: map
        });
        let poiPicker = new PoiPicker({
            city: '杭州',
            input: 'map-search-input'
        });
        //初始化poiPicker
        poiPickerReady(poiPicker);

        positionPicker.on('success', function (positionResult) {
            document.getElementById('lnglat').value = positionResult.position;
        });

        positionPicker.start();
        map.panBy(0, 1);

        map.addControl(new AMap.ToolBar({
            liteStyle: true
        }))
    });

    function poiPickerReady(poiPicker) {
        window.poiPicker = poiPicker;
        //选取了某个POI
        poiPicker.on('poiPicked', function (poiResult) {
            map.setCenter(poiResult.item.location);
        });
    }
</script>

</body>

</html>
